<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				display: flex;
				justify-content: center;
			}

			img {
				border-radius: 10px;
			}

			.big-img {
				width: 500px;
			}

			.small-img {
				width: 200px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<img class="big-img" src="img/shanhu.jpg" />
		</div>
		<div>
			<img onclick="showBigImg(this)" onmouseover="showBigImg(this)" class="small-img" src="img/shanhu.jpg" />
			<img onclick="showBigImg(this)" onmouseover="showBigImg(this)"  class="small-img" src="img/shanhu-001.jpg" />
			<img onclick="showBigImg(this)" onmouseover="showBigImg(this)"  class="small-img" src="img/shanhu-003.jpg" />
			<img onclick="showBigImg(this)" onmouseover="showBigImg(this)"  class="small-img" src="img/shanhu-004.jpg" />
		</div>
	</body>
	<script type="text/javascript">
		function showBigImg(smallImgElement){
			//获取被点击对象的src属性
			var src = smallImgElement.getAttribute("src");
			//把属性值赋给大图
			document.getElementsByClassName("big-img")[0].setAttribute("src",src);
		}
		
	</script>
</html>
